<%@page import="com.hochschild.sgv.domain.Solicitud"%>
<%@page import="java.util.ArrayList"%>
<%@page import="java.util.Iterator"%>
<%@page import="com.hochschild.sgv.util.DiasCalendario"%>
<%@page import="java.util.List"%>
<%@page contentType="text/html"%>
<%@page pageEncoding="UTF-8"%>

<%@ taglib uri="http://java.sun.com/jstl/core_rt" prefix="c" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jstl/fmt_rt" %>
<%@ taglib uri="http://struts.apache.org/tags-bean" prefix="bean" %>
<%@ taglib uri="http://struts.apache.org/tags-html" prefix="html" %>
<%@ taglib uri="http://struts.apache.org/tags-logic" prefix="logic" %>


<%
 //int diaAnio=(Integer) request.getAttribute("diaAnio");
 //int cantdias=(Integer) request.getAttribute("cantdias");
 int anioActual=(Integer) request.getAttribute("anioActual");
%>
<% 
String[] meses = new String[]{"Enero-","Febrero-","Marzo-", "Abril-", "Mayo-","Junio-","Julio-","Agosto-","Septiembre-","Octubre-","Noviembre-","Diciembre-","Enero-","Febrero-","Marzo-", "Abril-", "Mayo-","Junio-","Julio-","Agosto-","Septiembre-","Octubre-","Noviembre-","Diciembre-"};
int contMes= 0;
%>  

<html:html lang="true">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
        
                <script src="<%=request.getContextPath()%>/js/jquery/jquery.js" type="text/javascript"></script>
		<script type="text/javascript" src="<%=request.getContextPath()%>/js/jquery/jquery.alerts.js"></script>
		<link href="<%=request.getContextPath()%>/css/jquery.alerts.css" rel="stylesheet" type="text/css" media="screen" />
                
                <link href="<%=request.getContextPath()%>/css/planificacion.css" rel="stylesheet" type="text/css"/>
                <script type="text/javascript" src="<%=request.getContextPath()%>/js/Date.min.js"></script>
        
<!--        Div Actualizando-->
                <link type="text/css" href="<%=request.getContextPath()%>/js/jquery-ui-1.8/css/hot-sneaks/jquery-ui-1.8.12.custom.css" rel="stylesheet" />
                <script type="text/javascript" src="<%=request.getContextPath()%>/js/jquery-ui-1.8/js/jquery-ui-1.8.12.custom.min.js"></script>
                <script type="text/javascript" src="<%=request.getContextPath()%>/js/sgv/sgv.js"></script>
                <link rel="StyleSheet" href="<%=request.getContextPath()%>/css/loading.css" type="text/css" />
<!--        Fin Actualizando-->
            <title>Sistema Gesti&oacute;n de Vacaciones</title>
   </head>
  
<body style="background-color: white" onload="initScroll();loadStyle();">
    <style TYPE="text/css">
        #cache {
            position:absolute; left:0; top:0; z-index:10; visibility:hidden;
        }
        

    </style>

    <!--Div Actualizando-->
        <div id="idLoading" class="loading" >
            <div class="ui-dialog ui-widget ui-widget-content ui-corner-all ui-draggable ui-resizable mensajeVentana"
                 tabindex="-1" role="dialog" aria-labelledby="ui-dialog-title-dialog-message">
                <div class="ui-dialog-titlebar ui-widget-header ui-corner-all ui-helper-clearfix">
                    <span id="ui-dialog-title-dialog-message" class="ui-dialog-title">Proceso</span>
                </div>
                <div style="height: 300px; min-height: 300px; width: auto; margin-left: 30%;" class="ui-dialog-content ui-widget-content" id="dialog">
                    <div id="idCargador" class="imgLoading" ><img  src="<%=request.getContextPath()%>/images/loading/loading.gif"/></div>
                    <div id="idMensaje" class="mensajeText" style="margin-left: -60px;"></div>
                </div>
            </div>
        </div>  
<!--Fin Actualizando-->
<html:form action="planificacionVertical">

    <input type="hidden" name="metodo" id="metodo" value="" />
    
    <table border="1" style="border-style: solid; border-color: #a0a0a0; margin-top: 30px;">
        <tr>
            <td style="text-align: left; background: #ececec;">  

<!--                              Titulos                                    -->
<div id="divContenedorTitulo" style="width: 950px;">
    <table style="width: 100%;"  border="0" >
        <tr>
            <td>
                
            </td>
            <td class="border">
                <div id="divCabeceraMovibleMes">
                         <table id="tableTituloMes" border="0">
<!--                             Ls Suma de los width debe de ser igual al width del table-->
                            <tr>
                                
                            </tr>
                        </table>       
              </div> 
            </td>
        </tr>
        <tr>
            <td class="borderFilas">
<!--                Cabecera Estatica                                                     -->
    <table id="tableTituloColaborador" border="0" style="width: 300px;">
<!--                             Ls Suma de los width debe de ser igual al width del table-->
                    <tr>
<!--                        <td style="display: none; background: #1F497D ; color: #ffffff "></td>
                        <td style="display: none; background: #1F497D ; color: #ffffff "></td>
                        <td style="display: none; background: #1F497D ; color: #ffffff "></td>-->
                        
                        <td class="borderTituloColaboradores" style="width : 300px; height: 43px; "  colspan="2" ><span style="text-align: center;">Colaborador</span></td>
<!--                        <td class="borderTituloColaboradores" style="width : 95px; color: white; background: #1F497D;"><span > Días Calendario</span></td>
                        <td class="borderTituloColaboradores" style="width : 95px; color: white; background: #1F497D;"><span > Días Vacac. Planificados</span></td>-->
                    </tr>          
                </table>
<!--                    Fin Cabecera Estatica                               -->
            </td>

           <td class="border">
<!--               Cabecera Movible                                       -->
              <div id="divCabeceraMovible">
                    <table id="table_diasCalendario" border="0">
<!--                             Ls Suma de los width debe de ser igual al width del table--> 
                          <tr>
<!--                              nombre del Dia Letra Inicial-->
                          </tr>
                            <tr>
<!--                              Numero del Dia-->
                          </tr>
                        </table>       
              </div> 
<!--                Fin  Cabecera Movible       -->
        </td>
      </tr>
    </table>
</div>                          
<!--            Fin Titulos                      -->
         </td>
        </tr>
            <tr>
            <td style="text-align: left;">  
<div   >
<!-- bordercolor="black"           Contenido No Movible          style="background: green"   bordercolor="white"  CELLPADDING=0 -->
<div id='divContainer_left' style="width: 300px;">
        <table id="table_Colaborador" border="0"   CELLPADDING=0 style="width: 300px;">
                    <c:if test="${!empty lstPersonalSaps}">
                        <c:forEach var="y" begin="0" end="23" >
                            <c:if test="${y==0}">
                                <tr>
                                        <td class="altoFilaSinBordeSetenta" > &nbsp; </td>
                                </tr>
                            </c:if>
                            <c:if test="${y!=0}">
                                <tr>
                                    <td class="altoFilaSinBordeSetentaSiete" style="border-top-width:1px; border-top-style: solid; border-top-color: #a0a0a0;" > &nbsp; </td>
                                </tr>
                            </c:if>
                            <c:forEach items="${lstPersonalSaps}" var="jbean" varStatus="status">
                                <tr>   
                                    <!--<td style=" height: 10px; margin-top: 0px; width: 50%; "><span class="fuentenombreCentro" > &nbsp;</span></td>-->
                                    <td style=" height: 13px; margin-top: 0px; " align="center" > <span class="fuentenombreCentro" > <a href="javascript:void(0)" onclick="vistaAnual('<c:out value='${jbean.idUsuario}' />','<c:out value='${idUsuarioAprobador}' />','<c:out value='${anioActual}'/>');"><c:out value="${jbean.nombreCompleto}" /></a> </span></td>
                                </tr>
                                <tr>  
                                    <!--<td style=" height: 10px; margin-top: 0px; width: 50%;"><span class="fuentenombreCentro" > &nbsp;</span></td>-->
                                    <td style=" height: 13px; margin-top: 0px; " align="center" > <span class="fuentenombreCentro" > <c:out value="${jbean.nombrePosicion}" /> </span></td>
                                </tr>
                                <tr>
                                    <td class="altoFilaSinBordeCinco"  > &nbsp;</td>
                                </tr>

                            </c:forEach>
<!--                                <tr>
                                    <td class="altoFilaSinBordeTres" > &nbsp;</td>
                                </tr>-->
                      </c:forEach>      
                    </c:if>
                <tr>
                    <td class="altoFilaSinBorde"> &nbsp; </td>
                </tr>
                <tr>
                    <td class="altoFilaSinBorde"> &nbsp; </td>
                </tr>
<!--               Poner Filas en Blanco-->
                <c:forEach var="x" begin="0" end="5" step="1">
                     <tr>
                        <td class="altoSeparacionenBlanco" >
                            &nbsp; 
                        </td>
                    </tr>
                </c:forEach>
<!--               Fin Poner Filas en Blanco-->                  
            </table>
        </div>
<!--          FIN  Contenido No Movible            -->

<!--            Contenido Movible                  -->
    <div id='divContainer_right' style="width: 650px">

           <table id="table_diasColaboradorVertical"  >
 <!--                             Ls Suma de los width debe de ser igual al width del table-->        
                <c:set var="indicador" value="0"/> 
                <c:set var="cont" value="0"/> 
<!--                Cuerpo de los Registros-->
                    <c:set var="inicio" value="0"/> 
                    <c:set var="fin" value="${cantColaboradores - 1}"/> 
                    <c:if test="${!empty lstCalendario}">
                        <c:forEach items="${lstCalendario}" var="jbean" varStatus="status">
                            <tr>
                                <td class="borderTituloMeses31" colspan="31">
                                    <%=meses[contMes]%><%=anioActual%>
                                    <%
                                        contMes++;
                                        if(contMes==12)anioActual++;
                                    %>
                                </td>
                            </tr>
                            <tr>
                                <c:forEach items="${jbean}" var="jbeana" varStatus="status">
                                    <c:if test="${jbeana.tipoDeDia == 'rojo'}">
                                            <td  class="diasCalendario" ><span class="fuente" style="color: red;"> <c:out value="${jbeana.nombreDia}" /></span> </td>
                                   </c:if>
                                   <c:if test="${jbeana.tipoDeDia !='rojo'}">
                                            <td  class="diasCalendario" ><span class="fuente">  <c:out value="${jbeana.nombreDia}" /></span></td>
                                   </c:if>    
                                </c:forEach>
                            </tr>
                            <tr>
                                <c:forEach items="${jbean}" var="jbeana" varStatus="status">
                                    <c:if test="${jbeana.tipoDeDia == 'rojo'}">
                                            <td  class="diasCalendario" ><span class="fuente" style="color: red;"> <c:out value="${jbeana.numerodia}" /></span> </td>
                                   </c:if>
                                   <c:if test="${jbeana.tipoDeDia !='rojo'}">
                                            <td  class="diasCalendario" ><span class="fuente">  <c:out value="${jbeana.numerodia}" /></span></td>
                                   </c:if>    
                                </c:forEach>
                            </tr>
<!--                             Los Dias Planificados-->
                            <tr>
                                <td class="altoFilaSinBordeDiez" >
                                    &nbsp; 
                                </td>
                            </tr>
                            <c:forEach items="${diasPlanificados}" var="jbeandata" begin="${inicio}" end="${fin}" varStatus="status">
                                <tr>
                                    <c:forEach items="${jbeandata}" var="jjj" varStatus="status">
                                        <c:if test="${jjj == 'PP'}" >
                                            <c:set var="cont" value="${cont + 1}"/> 
                                            <input type="hidden" name="textDinamicos"  id="<c:out value='${cont}'/>" value="P" />
                                            <td  id="td<c:out value='${cont}'/>" class="borderFilas"  style="background: #95b84e;" ><span class="fuente">&nbsp;&nbsp;&nbsp; </span></td>
                                        </c:if>
                                        <c:if test="${jjj == 'BPP'}" >
                                            <c:set var="cont" value="${cont + 1}"/> 
                                            <input type="hidden" name="textDinamicos"  id="<c:out value='${cont}'/>" value="" />
                                            <td  id="td<c:out value='${cont}'/>" class="borderFilas" style="background: #fcfcfc;"><span class="fuente">&nbsp;&nbsp;&nbsp; </span></td>
                                        </c:if>
                                        <c:if test="${jjj == 'P'}" >
                                            <c:set var="cont" value="${cont + 1}"/> 
                                            <c:set var="sumDiasPlanificados" value="${sumDiasPlanificados + 1}"/> 
                                            <input type="hidden" name="textDinamicos"  id="<c:out value='${cont}'/>" value="P" />
                                            <!--onclick="pintaCelda(this);"--> 
                                            <td  id="td<c:out value='${cont}'/>" class="borderFilas " style="background: #95b84e;" ><span class="fuente">&nbsp;&nbsp;&nbsp;</span></td>
                                        </c:if>
                                         <!--Agregando dias Libres Planificadas, dias Blanco Libres Pasadas, dis Libres Planificadas Pasadas--> 
                                         <c:if test="${jjj == 'LP'}" >
                                            <c:set var="sumDiasPlanificados" value="${sumDiasPlanificados + 1}"/> 
                                            <c:set var="cont" value="${cont + 1}"/> 
                                            <input type="hidden" name="textDinamicos"  id="<c:out value='${cont}'/>" value="P" />
                                            <td  id="td<c:out value='${cont}'/>" class="borderFilas " style="background: #95b84e;"  ><span class="fuentediaLibre">L </span></td>
                                        </c:if>
                                        <c:if test="${jjj == 'BLP'}" >
                                             <c:set var="cont" value="${cont + 1}"/> 
                                             <input type="hidden" name="textDinamicos"  id="<c:out value='${cont}'/>" value="" />
                                             <td id="td<c:out value='${cont}'/>" class="borderFilas"  style="background: #fcfcfc;" ><span class="fuentediaLibre">L </span></td>
                                        </c:if>  
                                        <c:if test="${jjj == 'LPP'}" >
                                             <c:set var="cont" value="${cont + 1}"/> 
                                            <input type="hidden" name="textDinamicos"  id="<c:out value='${cont}'/>" value="P" />
                                            <td  id="td<c:out value='${cont}'/>" class="borderFilas"  style="background: #95b84e;" ><span class="fuentediaLibre">L </span></td> 
                                        </c:if>
                                          <!--Fin-->    
                                        <c:if test="${jjj == ''}" >
                                            <c:set var="cont" value="${cont + 1}"/> 
                                            <input type="hidden" name="textDinamicos"  id="<c:out value='${cont}'/>" value="" />
                                            <!--onclick="pintaCelda(this);"--> 
                                            <td id="td<c:out value='${cont}'/>"  class="borderFilas "  style="background: #fcfcfc; " ><span class="fuente">&nbsp;&nbsp;&nbsp;</span></td>
                                        </c:if>
                                        <c:if test="${jjj == 'L'}" >
                                             <c:set var="cont" value="${cont + 1}"/> 
                                             <input type="hidden" name="textDinamicos"  id="<c:out value='${cont}'/>" value="" />
                                             <td id="td<c:out value='${cont}'/>" class="borderFilas"  ><span class="fuentediaLibre">L </span></td>
                                        </c:if> 
                                        <c:if test="${jjj == 'G'}" >
                                             <td id="td<c:out value='${cont}'/>" class="borderFilas diasGozados"  ><span class="fuente">&nbsp;&nbsp;&nbsp; </span></td>
                                        </c:if>  

                                        <c:if test="${jjj == 'LG'}" >
                                            <td class="borderFilas" id="i"><span class="fuente">&nbsp;&nbsp;&nbsp; </span></td>
                                        </c:if>     
                                    </c:forEach>
                                </tr>
                                 <tr>
                                <td class="altoFilaSinBordeDiez" >
                                        &nbsp; 
                                </td>
                                </tr>
                            </c:forEach>
                            <c:set var="inicio" value="${fin + 1}"/> 
                            <c:set var="fin" value="${fin + cantColaboradores}"/>     
                        </c:forEach>

                    </c:if>
                        
                <tr>
                    <td class="altoFilaSinBorde" >
                        &nbsp; 
                    </td>
                </tr>
<!--               Poner Filas en Blanco-->
                <c:forEach var="x" begin="0" end="5" step="1">
                     <tr>
                        <td class="altoSeparacionenBlanco" >
                            &nbsp; 
                        </td>
                    </tr>
                </c:forEach>
<!--               Fin Poner Filas en Blanco-->                
            </table>
        </div> 
<!--              FIN Contenido Movible  -->

</div>

            </td>
        </tr>
    </table>   
                
<table border="0" style="height: 40px; width: 1100px">
        <tbody>
            <tr>
                <td style="width: 630px;">
                    &nbsp;
<!--                    <button class="btn" type="button" id="btnSolicitar" name="btnSolicitar" onclick="grabar();"><img src="<%=request.getContextPath()%>/images/iconos/nuevo.png" alt="" height="15px"/>&nbsp;Solicitar</button>-->
                </td>
                <td style="width: 50px;">
                    <span  style="width: 40px;" >&nbsp;&nbsp;&nbsp;</span>
                </td>
                <td  style="width: 20px; text-align: right;">
                    <div class="diasPlanificados" style="width: 20px; height: 20px;">&nbsp;</div> 
                </td>
                 <td class="cuadroDescripcion" style="width: 145px; text-align: left;">
                    Vacaciones Planificadas
                </td>
                <td  style="width: 20px; text-align: right;">
                    <div class="diasGozados" style="width: 20px; height: 20px;">&nbsp;</div>
                </td>
                <td class="cuadroDescripcion" style="width: 140px; text-align: left;">
                    Vacaciones Gozadas
                </td>
            </tr>
        </tbody>
    </table>                
</html:form>

    </body>

    <script type="text/javascript">
        
        var leftDiv = document.getElementById('divContainer_left');
        var rightDiv = document.getElementById('divContainer_right');
//        var cabeceraDiv = document.getElementById('divCabeceraMovible');
//        var cabeceraMesDiv = document.getElementById('divCabeceraMovibleMes');
//        var rangominimo = <c:out value='${cantMinima}'/>;
//        var lstdiasPlanificados = document.getElementsByName("diasPlanificadosEquipo");
        function initScroll() {
                
                        rightDiv.onscroll = function() {
                                                        leftDiv.scrollTop = this.scrollTop;
//                                                        cabeceraDiv.scrollLeft = this.scrollLeft;
//                                                        cabeceraMesDiv.scrollLeft = this.scrollLeft;
                                                        };
                                                        
        }
        function loadStyle(){
            
            var objTC= document.getElementById("table_Colaborador");
            var innerHeightTC = objTC.offsetHeight; 
            
            var objTV= document.getElementById("table_diasColaboradorVertical");
            var innerHeightTV = objTV.offsetHeight; 
            
//            objTC.style.height = innerHeightTC+"px";
//            objTV.style.height = innerHeightTC+"px";
            alert("objTC: " + objTC.style.height + " objTV: " + objTV.style.height);
//			arrayTextArea[i].style.height = innerHeight+"px";

           }     
        
function vistaAnual(idUsuario, idUsuarioAprobador, anio){

}


      
</script>
</html:html>
